<template>
  <div class="informationRecordwrap">
  <div class="pageTableInner">
    <div class="infoSearchWrap">
      <div class="infoSearchOne">
        <el-row :gutter="20">
          <el-col :span="6">
            <div class="searchWrap">
              <span class="searchFont">行政区域:</span>
              <span class="searchInputFont" >
                  <el-select v-model="searchInfo.parentId" :disabled="$store.state.userInfo.regionId?true:false" @change="searchRowsInfo()" size="mini"
                              placeholder="行政区">
                    <el-option
                      v-for="item in districtData"
                      :key="item.id"
                      :label="item.regionName"
                      :value="item.id">
                    </el-option>
                  </el-select>
                </span>
            </div>
          </el-col>
          <el-col :span="4" v-if="this.$store.state.userInfo.regionId">
            <div class="searchWrap">
              <span class="searchFont">需求总量:</span>
              <span class="searchInputFont" >
                 {{parentData.volumes}}
              </span>
            </div>
          </el-col>
          <el-col :span="4" v-if="this.$store.state.userInfo.regionId">
            <div class="searchWrap">
              <span class="searchFont">预警阀值:</span>
              <span class="searchInputFont" >
                  {{parentData.alarmValues}}
              </span>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="tableContainer" style="top:75px;">
      <div class="tableInner" ref="tableInner" >
        <el-table
          ref="multipleTable"
          :data="rows"
          stripe
          show-summary
          :height="tableHeight"
          tooltip-effect="dark"
          style="width: 100%"
        >
          <el-table-column
            label="街道名称"
            prop="regionName"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            label="需求总量"
            prop="volume"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            label="预警阀值"
            prop="alarmValue"
          >
          </el-table-column>
          <el-table-column
            label="修改时间"
            prop="updateTime"
            show-overflow-tooltip>
          </el-table-column>

          <el-table-column v-if="$store.state.btnMenuIds.indexOf(120)>-1" label="编辑">
            <template slot-scope="scope">
              <i @click='handEdit(scope.row)' class="iconfont icon-bianji1"></i>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <addBtn ref="addBtn" @searchRowsInfo="searchRowsInfo" :editInfo="editInfo"></addBtn>
  </div>
  </div>
</template>

<script>
  import addBtn from './addBtn.vue';
  export default {
    props: [],
    data(){
      return {
        rows: [],
        editInfo: [],
        tableHeight: 400,
        parentData:{volumes:0,alarmValues:0},
        districtData: [{regionName:"全部",id:"0"}],
        searchInfo:{parentId:this.$store.state.userInfo.regionId?this.$store.state.userInfo.regionId:"0"},
      }
    },
    components: {addBtn},
    created(){
      this.$store.state.districtData.forEach(item=>{
        this.districtData.push(item)
      })
      this.searchRowsInfo()
      if(this.$store.state.userInfo.regionId){
        this.getParentInfo()
      }
    },
    mounted(){
      this.$nextTick(() => {
        //表格滚动
        this.tableHeight = document.querySelector(".informationRecordwrap").clientHeight - 115
      })
    },
    methods: {

    handEdit(row){
      this.editInfo=row
        this.$refs.addBtn.dialogFormVisibleAdd=true
    },
      //获取全市
      getParentInfo(){
        this.axios.post(process.env.API_HOST + `/put/selectRegionCount`, {parentId:0})
          .then(response => {
            const result = response.data
            if(result.code==200){
                this.parentData=result.result
            }
          })

      },
      //获取所有信息
      searchRowsInfo(){
          this.axios.post(process.env.API_HOST + `/put/selectRegionPutList`, this.searchInfo)
            .then(response => {
              const result = response.data
              if(result.code==200){
                this.rows = result.result
//                this.count = result.total;
              }
            })

      },

    },
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "../../../common/stylus/mixin.styl"
  .informationRecordwrap
    page()



</style>
